/* less 文件 (移动端通用less文件)
* 作者 Aaron
* 时间 2017/12/14
* 协议 MIT 
* 只考虑webkit内核手机浏览器和IE内核浏览器
* @charset "utf-8";
*/

.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: '';
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// 左右浮动
.fl() {
  float: left;
  *display: inline;
}

.fr() {
  float: right;
  *display: inline;
}

.inline-block() {
  /* 如果有必要可在其父元素上应用样式vertical-align:top; */
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.text-overflow() {
  // 文字溢出隐藏显示省略号，需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的)
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文字隐藏显示省略号......
.text-ellipsis(@row: 2) {
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
  -webkit-line-clamp: @row; // 显示的行,默认为2
}

// 图片裁剪
.image-cover() {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 渐变
.linear-gradient(@direction: top;
@a: #ffa600;
@b: #fe9200) {
  background-image: -webkit-linear-gradient(@direction, @a, @b);
  background-image: -ms-linear-gradient(@direction, @a 0, @b 100%);
  background-image: linear-gradient(to @direction, @a, @b);
}

// 利用边框制作小三角
.triangle(@type: bottom, @x: 10px, @c: #999, @y: @x) {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  vertical-align: middle;
  // 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题
  @transparent: @y dashed transparent;
  // 该特殊边框的大小必须小于其他边框大小的四倍，否则IE6会有问题
  @special: @x solid @c;
  .border();
  .border() when (@type = bottom) {
    border-bottom: @special;
    border-left: @transparent;
    border-right: @transparent;
  }
  .border() when (@type = top) {
    border-top: @special;
    border-left: @transparent;
    border-right: @transparent;
  }
  .border() when (@type = left) {
    border-left: @special;
    border-top: @transparent;
    border-bottom: @transparent;
  }
  .border() when (@type = right) {
    border-right: @special;
    border-top: @transparent;
    border-bottom: @transparent;
  }
}

// 鼠标经过旋转
.rotate(@d: 180deg, @s: 0.3s) {
  -webkit-transition: @s ease-in;
  -ms-transition: @s ease-in;
  transition: @s ease-in;
  &:hover,
  &-hover {
    -webkit-transform: rotate(@d);
    -ms-transform: rotate(@d);
    transform: rotate(@d);
  }
}

// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)
.grayscale() {
  -webkit-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  /* Chrome 19+ & Safari 6+ */
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

// CSS3 "栅格化"(flexbox)
.display-flex() {
  display: -webkit-box;
  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -ms-flexbox;
  /* IE 10 */
  display: flex;
}

.box-flex(@a) {
  -webkit-flex: @a;
  -ms-flex: @a;
  flex: @a;
}

// 自定义less 混合函数
// 圆角
.border-radius(@a: 3px) {
  -webkit-border-radius: @a;
  -ms-border-radius: @a;
  border-radius: @a;
}

//变形
.transform(@all, @s: center) {
  -ms-transform: @all;
  -webkit-transform: @all;
  transform: @all;
  -webkit-transform-origin: @s;
  -ms-transform-origin: @s;
  transform-origin: @s;
}

//过渡
.transition(@all) {
  -ms-transition: @all;
  -webkit-transition: @all;
  transition: @all;
}

//常用过渡
.transiton() {
  -webkit-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

/*可以自定义修改*/

//动画
.animation(@all) {
  -ms-animation: @all;
  -webkit-animation: @all;
  animation: @all;
}

//字体特效
.text-shadow-light(@blur: 2px, @color: #fff) {
  text-shadow: 0px 0px @blur @color;
  /*可发挥想象定义常用字体特效*/
}

//盒子阴影
.box-shadow( @a: 0 0 10px rgba(0, 0, 0, 0.25)) {
  -webkit-box-shadow: @a;
  -moz-box-shadow: @a;
  box-shadow: @a;
}

//文字旋转
.text-rotate(@angle: 45deg) {
  -webkit-transform: rotate(@angle);
  -moz-transform: rotate(@angle);
  transform: rotate(@angle);
}

//去掉手持设备点击时出现的透明层(一般在头部做格式化)
.delete-highlight() {
  a,
  button,
  input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    /* For some Androids */
  }
}

// 去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果
.delete-appearance() {
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    -webkit-appearance: none;
  }
}

// 为表单控件中每个文本域提供占位符（Placeholder）文本的颜色
.placeholder(@color: #999) {
  &::-moz-placeholder {
    color: @color;
  } // Firefox
  &:-ms-input-placeholder {
    color: @color;
  } // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color: @color;
  } // Safari and Chrome
}
